<template>
  <el-config-provider :locale="zhCn">
    <el-table
      :data="mapStore.basicInfoTableData"
      style="width: 100%"
      :row-style="tableRowStyle"
      @row-click="handleClickRow"
    >
      <el-table-column prop="licensePlate" label="车牌号码" width="100" />
      <el-table-column prop="licenseType" label="车牌类型" width="80" />
      <el-table-column prop="licenseColor" label="车牌颜色" width="80" />
      <el-table-column prop="carColor" label="车身颜色" width="80" />
      <el-table-column prop="owner" label="所有人" width="70" />
      <el-table-column prop="phone" label="联系电话" />
      <!-- <el-table-column prop="approvedLoadCapacity" label="核定载质量" width="100" /> -->
      <el-table-column prop="nuclearTonnage" label="核载吨位" width="80" />
      <el-table-column
        prop="authorizedSeatingCapacity"
        label="核座"
        width="80"
      />
    </el-table>

    <div class="space"></div>

    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next"
      :current-page="mapStore.basicInfoTableCurrentPage"
      :page-size="mapStore.basicInfoTablePageSize"
      :page-sizes="[5, 10]"
      :total="mapStore.basicInfoTableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { fetchBasicInfoData, fetchTrajectoryData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const tableRowStyle = row => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

const handleClickRow = row => {
  mapStore.currentCar = row.licensePlate;

  mapStore.trajectoryTodayTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryTodayTableCurrentPage,
    mapStore.trajectoryTodayTablePageSize,
    "Today"
  );

  mapStore.trajectoryWeekTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryWeekTableCurrentPage,
    mapStore.trajectoryWeekTablePageSize,
    "Week"
  );

  mapStore.trajectoryMonthTableCurrentPage = 1;
  fetchTrajectoryData(
    row.licensePlate,
    mapStore.trajectoryMonthTableCurrentPage,
    mapStore.trajectoryMonthTablePageSize,
    "Month"
  );
};

// 分页大小改变时的回调
const handleSizeChange = val => {
  mapStore.basicInfoTablePageSize = val;
  fetchBasicInfoData(
    mapStore.basicInfoTableCurrentPage,
    mapStore.basicInfoTablePageSize
  );
};

// 当前页改变时的回调
const handleCurrentChange = val => {
  mapStore.basicInfoTableCurrentPage = val;
  fetchBasicInfoData(
    mapStore.basicInfoTableCurrentPage,
    mapStore.basicInfoTablePageSize
  );
};
</script>

<style scoped>
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
</style>
